<template>
    <div class="app-container">
        <div class="topform">
            <el-input style="width: 300px" clearable v-model="Queryform.serchKeyword" placeholder="请输入搜索内容"
                      autocomplete="off"/>
            <el-button type="primary" style="margin-left: 10px" @click="getlistdata(true)" icon="el-icon-search">搜索
            </el-button>
            <el-button type="primary" @click="opendialog" icon="el-icon-circle-plus-outline">添加</el-button>
        </div>
        <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row
                  header-cell-class-name="tableheader">
            <el-table-column align="center" label="角色名称">
                <template slot-scope="scope">
                    {{ scope.row.role_name }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="登录名称">
                <template slot-scope="scope">
                    {{ scope.row.login_name }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="员工姓名">
                <template slot-scope="scope">
                    {{ scope.row.u_name }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="微信名">
                <template slot-scope="scope">
                    {{ scope.row.wx_name }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="微信电话">
                <template slot-scope="scope">
                    {{ scope.row.wx_tel }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="联系电话">
                <template slot-scope="scope">
                    {{ scope.row.link_phone }}
                </template>
            </el-table-column>
            <el-table-column align="center" label="是否使用">
                <template slot-scope="scope">
                    <span v-if="scope.row.isuse===true">是</span>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="操作" width="280">
                <template slot-scope="scope">
                    <el-button type="primary" @click="opendialog(scope.row)" icon="el-icon-edit">编辑</el-button>
                    <el-button v-if="scope.row.bindOpenid===null||scope.row.bindOpenid===''" type="success"
                               @click="bindwx(scope.row)">绑定微信
                    </el-button>
                    <el-button v-else type="danger" @click="unbindwx(scope.row)">解绑微信</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
                    style="text-align: center"
                    layout="prev, pager, next"
                    small
                    :current-page="Queryform.page"
                    :page-size="Queryform.pagesize"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"/>
        </div>
        <el-dialog title="管理员工" :visible.sync="dialog" width="30%">
            <el-form :model="form" ref="form" :rules="rule" label-width="100px">
                <el-form-item label="账号:" prop="login_name">
                    <el-input clearable v-model="form.login_name" autocomplete="off" placeholder="请输入账号"/>
                </el-form-item>
                <el-form-item label="姓名:" prop="u_name">
                    <el-input clearable v-model="form.u_name" autocomplete="off" placeholder="请输入姓名"/>
                </el-form-item>
                <el-form-item v-if="isadd" label="密码:" prop="login_pwd">
                    <el-input clearable v-model="form.login_pwd" show-password autocomplete="off" placeholder="请输入密码"/>
                </el-form-item>
                <el-form-item v-if="!isadd" label="密码:">
                    <el-input clearable v-model="form.login_pwd" show-password autocomplete="off" placeholder="请输入密码"/>
                </el-form-item>
                <el-form-item label="联系电话:" prop="link_phone">
                    <el-input clearable v-model="form.link_phone" autocomplete="off" placeholder="请输入联系电话"/>
                </el-form-item>
                <el-form-item label="角色名称:" prop="role_id">
                    <el-select clearable v-model="form.role_id" style="width: 100%" placeholder="请选择角色名称">
                        <el-option v-for="item in roles" :label="item.role_name" :value="item.rid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="微信名:" prop="wx_name">
                     <el-input clearable v-model="form.wx_name" autocomplete="off" placeholder="请输入微信名"/>
                 </el-form-item>
                <el-form-item label="微信电话:" prop="wx_tel">
                    <el-input clearable v-model="form.wx_tel" autocomplete="off" placeholder="请输入微信电话"/>
                </el-form-item>
                <!--<el-form-item label="微信号:" prop="wx_no">
                    <el-input clearable v-model="form.wx_no" autocomplete="off" placeholder="请输入微信号"/>
                </el-form-item>-->
                <el-form-item label="是否使用:" prop="isuse">
                    <el-switch v-model="form.isuse">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="dialogbtn">保 存</el-button>
            </div>
        </el-dialog>
        <el-dialog title="绑定微信" :visible.sync="binddialog" width="30%" @closed="getlistdata">
            <div style="text-align: center">
                <img :src="bindsrc" alt="">
            </div>
        </el-dialog>
        <el-dialog title="解绑微信" :visible.sync="unbinddialog" width="30%" @closed="getlistdata">
            <div style="text-align: center">
                <img :src="unbindsrc" alt="">
            </div>
        </el-dialog>
    </div>
</template>

<script>
import QRCode from 'qrcode'

export default {
    data() {
        return {
            Queryform: {
                serchKeyword: '',
                isPage: true,
                page: 1,
                pagesize: 20
            },
            form: {
                uid: "",
                login_name: "",
                u_name: "",
                login_pwd: "",
                link_phone: "",
                role_id: "",
                wx_tel: "",
                isuse: true,
                wx_name:""
            },
            rule: {
                login_name: [
                    { required: true, message: '此项为必填项' }
                ],
                u_name: [
                    { required: true, message: '此项为必填项' }
                ],
                login_pwd: [
                    { required: true, message: '此项为必填项' }
                ],
                link_phone: [
                    { required: true, message: '此项为必填项' }
                ],
                role_id: [
                    { required: true, message: '此项为必填项' }
                ],
                /*wx_name: [
                    { required: true, message: '此项为必填项' }
                ],
                wx_tel: [
                    { required: true, message: '此项为必填项' }
                ],
                wx_no: [
                    { required: true, message: '此项为必填项' }
                ],*/
                isuse: [
                    { required: true, message: '此项为必填项' }
                ]
            },
            list: [],
            roles: [],
            total: 0,
            bindsrc: '',
            unbindsrc: '',
            listLoading: true,
            dialog: false,
            binddialog: false,
            unbinddialog: false,
            isadd: true
        };
    },
    created() {
        this.getlistdata();
        this.getallrole()
    },
    methods: {
        getlistdata(isquery) {
            if (isquery === true) {
                this.Queryform.page = 1
            }
            this.listLoading = true;
            this.$post(this.$api + '/user/get_pagelist', this.Queryform)
                .then((res) => {
                    this.listLoading = false;
                    if (res.code === 0) {
                        this.list = res.rows;
                        this.total = res.total;
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
        },
        getallrole() {
            this.$post(this.$api + '/System/Role/get_pagelist', {
                'isPage': false
            })
                .then((res) => {
                    if (res.code === 0) {
                        this.roles = res.rows;
                    } else {
                        this.$notify({
                            title: '失败',
                            message: res.msg,
                            type: 'error'
                        });
                    }
                });
        },
        opendialog(item) {
            this.dialog = true;
            if (item.uid === undefined) {
                this.isadd = true;
                this.form = {
                    uid: "",
                    login_name: "",
                    u_name: "",
                    login_pwd: "",
                    link_phone: "",
                    role_id: "",
                    wx_tel: "",
                    isuse: true,
                    wx_name:""
                };
            } else {
                this.isadd = false;
                this.form = {
                    uid: item.uid,
                    login_name: item.login_name,
                    u_name: item.u_name,
                    link_phone: item.link_phone,
                    role_id: item.role_id,
                    wx_tel: item.wx_tel,
                    isuse: item.isuse,
                    wx_name:item.wx_name
                };
            }
        },
        bindwx(item) {
            this.binddialog = true
            const bindQR = async text => {
                try {
                    this.bindsrc = await QRCode.toDataURL(text, {
                        width: 300,
                        height: 300
                    })
                } catch (err) {
                    console.error(err)
                }
            }
            let url = 'http://www.shouhuojiyun.com/Rknew/wx/bind_rk_user?uid=' + item.uid + '&u_name=' + item.u_name
            bindQR(url)
        },
        unbindwx(item) {
            this.unbinddialog = true
            const unQR = async text => {
                try {
                    this.unbindsrc = await QRCode.toDataURL(text, {
                        width: 300,
                        height: 300
                    })
                } catch (err) {
                    console.error(err)
                }
            }
            let url = 'http://www.shouhuojiyun.com/Rknew/wx/unbind_rk_user?uid=' + item.uid
            unQR(url)
        },
        dialogbtn() {
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    this.listLoading = true;
                    this.$post(this.$api + '/user/save_item', this.form)
                        .then((res) => {
                            this.listLoading = false;
                            if (res.code === 0) {
                                this.$notify({
                                    title: '成功',
                                    message: res.msg,
                                    type: 'success'
                                });
                                this.dialog = false;
                                this.form = {
                                    uid: "",
                                    login_name: "",
                                    u_name: "",
                                    login_pwd: "",
                                    link_phone: "",
                                    role_id: "",
                                    wx_tel: "",
                                    isuse: true
                                };
                                this.getlistdata();
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: res.msg,
                                    type: 'error'
                                });
                            }
                        });
                }
            })
        },
        handleSizeChange(v) {
            this.Queryform.pagesize = v;
            this.getlistdata();
        },
        handleCurrentChange(v) {
            this.Queryform.page = v;
            this.getlistdata();
        }
    }
};
</script>

<style>
    #bindqrcode {
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }

    #unbindqrcode {
        width: 300px;
        height: 300px;
        margin: 0 auto;
    }
</style>
